<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app1">
        <!-- 初始化条件渲染，初始化开销小，变动开销大 -->
        <!-- if(xxxx){}else if(xxx){}else{} -->
       <span v-if="seen === true">span1 v-if {{seen}}</span>
       <span v-else-if="seen === false">span2 v-else-if {{seen}}</span>
       <span v-else>span3 v-else {{seen}}</span>
    </div>
    <hr>
    <div id="app2">
        <!-- 一开始就存在，初始化的开销大，变动开销小 -->
        <span v-show="seen === true">span1 {{seen}}</span>
        <span v-show="seen === false">span2 {{seen}}</span>
    </div>
    <hr>
    <div id="app3">
        <span v-for="(item,index) in countries">{{index}}-{{item}}</span>
        <span v-for="(qu,key,index) in info">{{index}}-{{key}}-{{ qu }}<br></span>
    </div>
    <hr>
    <div id="app4">
        <input type="text" v-model="message"><br>
        <span>message is {{message}}</span><br>
        <textarea v-model="message2" name="" id="" cols="30" rows="10"></textarea><br>
        <span>message2 is {{message2}}</span><br>

        <input type="checkbox" v-model="checked"><span>{{checked}}</span><br>

        <input v-model="checkedNames" type="checkbox" value="纵横捭阖" ><span>纵横捭阖</span>
        <input v-model="checkedNames" type="checkbox" value="曲解的意" ><span>曲解的意</span>
        <input v-model="checkedNames" type="checkbox" value="浩瀚星河" ><span>浩瀚星河</span>
        <input v-model="checkedNames" type="checkbox" value="海绵" ><span>海绵</span><br>
        <span>当前被选中的同学有：{{checkedNames}}</span><br>

        <input type="radio" value="男生" v-model="picked"><span>男生</span>
        <input type="radio" value="女生" v-model="picked"><span>女生</span>
        <br>
        <span>你当前选择的性别是{{picked}}</span><br>
        <select v-model="selected">
            <option disable value="">请选择</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select><br>
        <span>你当前选择的是{{selected}}</span><br>
        <select v-model="selected2" multiple>
            <option disable value="">请选择</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <span>你选择的是{{selected2}}</span>
    </div>
    <script>
        var app1 = new Vue({
            el:"#app1",
            data:{
                seen:true
            }
        });
        var app2 = new Vue({
            el:"#app2",
            data:{
                seen:true
            }
        })
        var app3 = new Vue({
            el:"#app3",
            data:{
                countries:["中国","美国","英国","法国"],
                info:{
                    name:"林川老师",
                    age:17,
                    code:"vuejs"
                }
            }
        })
        var app4 = new Vue({
            el:"#app4",
            data:{
                message:"您好",
                message2:"此处是一个文本区域",
                checked:false,
                checkedNames:[],
                picked:"none",
                selected:"",
                selected2:[]
            }
        })
    </script>
</body>
</html>